跳到主要内容

布局概述(Layouts Overview)

布局允许您在 Rive 中构建响应式 UI 组件。让您的设计根据可用空间来适应、填充或重排内容。利用 Rive 的布局系统来适应各种用例:

  • 将项目固定到父画板或容器的选定边缘。
  • 创建适应文本大小的按钮和标签。
  • 构建可以重排、动画和滚动的内容列表和网格(滚动功能即将推出)。
  • 组合和嵌套布局以开发完整的界面

您可以使用这些技术来创建各种可以流畅调整大小以适应任何设备尺寸或方向的生产就绪按钮、列表和菜单。Rive 图形不是模型或原型,它们是可以改变状态并连接到真实数据的功能性图形 — 而且因为 Rive 可以在任何地方运行,您可以在移动应用、游戏引擎、网站、自定义设备等多个平台上重复使用相同的响应式图形。


布局入门(Getting Started with Layouts)

有多种方法可以开始向您的设计添加布局。

布局工具(Layout Tools)

在排列工具中添加了一些新的布局选项:

图片

  • 布局(Layout): 一个基本的布局容器。选择工具并在画板上拖动来创建布局。默认情况下,布局绝对定位到顶部和左侧边缘。新创建的布局边界内的项目将自动成为其子项。在拖动布局时按住 command / control 可以防止现有项目被移入布局中。

    视频

  • 行/列(Row/Column): 行和列工具是基础布局工具的变体,但包含了按各自方向排列的初始子项集。在将行或列拖到舞台上时,您可以使用数字键或上/下键来定义子项的数量。

    视频

包装在布局中(Wrap in Layout)

与其从空的布局容器开始,您可能更喜欢将现有项目包装到布局中。有多种方法可以将活动选择包装在布局中:

  • 在舞台或层级上右键点击以显示上下文菜单。选择 包装在 > 布局中

    视频

  • 或者,您可以使用检查器中的 布局选择 按钮。

    视频

  • 使用 shift + L 快捷键。

    视频

  • 使用布局工具在舞台上的项目上绘制布局。默认情况下,包含在拖动布局内的项目将成为绝对定位的子项。在将布局拖到舞台上时按住 command/ control 修饰键可以防止这种行为。

    视频


快速入门视频(Quickstart Video)

视频